<section>
    <h1 class="blue" data-id="#plugins/tools"><i class="ace-icon fa fa-desktop grey"></i> Tools</h1>

    <div class="hr hr-double hr32"></div>

    <!-- #section:plugins/tools -->
    <div class="help-content">
        <h3 class="info-title smaller" data-id="#plugins/tools.node-js">Node.js</h3>
        <!-- #section:plugins/tools.node-js -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    For more information and installing Node.js please see its page at
                    <a href="http://nodejs.org">nodejs.org</a>
                </li>

                <li>
                    It's optional and you don't need to use it.
                    <br/>
                    I've used it for compiling LESS files into CSS and
                    Mustache templates into static HTML
                </li>
            </ul>
        </div>
        <!-- /section:plugins/tools.node-js -->


        <h3 class="info-title smaller" data-id="#plugins/tools.less-js">Less.js</h3>
        <!-- #section:plugins/tools.less-js -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Less is a CSS pre-processor which is useful for creating and maintating large amounts of CSS code
                </li>

                <li>
                    You can find more info about it here <a href="http://lesscss.org/">lesscss.org</a>
                </li>

                <li>
                    Almost all Ace CSS files are generated from compiling LESS files
                </li>

                <li>
                    First you need to install less compiler via npm:
                    <code>npm install -g less</code>

                </li>

                <li>
                    To compile LESS files, you can run the following commands:
                    <br/>
                    <code>lessc ace.less path/to/ace.css</code>
                    <br/>
                    <code>lessc skins/skins.less path/to/ace-skins.css</code>

                    <br/>
                    For options such as compressing output, etc, you can use its help by using the following command:
                    <br/>
                    <code>lessc --help</code>
                </li>

                <li>
                    You can also use the <a href="../build/css.html">in-browser CSS builder tool</a> to build a custom
                    CSS.
                </li>
            </ul>
        </div>
        <!-- /section:plugins/tools.less-js -->


        <h3 class="info-title smaller" data-id="#plugins/tools.mustache">Mustache Compilers</h3>
        <!-- #section:plugins/tools.mustache -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Ace's demo pages are mustache templates compiled into HTML
                </li>

                <li>
                    For more info about Mustache files please see <a href="#files/mustache" class="help-more">Mustache
                    files</a>
                </li>

                <li>
                    PHP Mustache is used during development.
                    <br/>
                    And Javascript Mustache compiler is used for final demo output
                </li>

                <li>
                    For more info please see the following links:
                    <br/>
                    <a href="http://mustache.github.io/">Mustache</a>
                    <br/>
                    <a href="https://github.com/janl/mustache.js/">Mustache.js</a>
                    <br/>
                    <a href="http://twitter.github.io/hogan.js/">Hogan.js</a>
                    <br/>
                    <a href="https://github.com/bobthecow/mustache.php">PHP Mustache</a>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/tools.mustache -->


        <h3 class="info-title smaller" data-id="#plugins/tools.uglifyjs">UglifyJS</h3>
        <!-- #section:plugins/tools.uglifyjs -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    UglifyJS is a popular tool for minifying Javascript files
                </li>

                <li>
                    It can also be used inside browser like in the <a href="../build/js.html">Javascript builder
                    tool</a>
                </li>

                <li>
                    For more info please see <a href="http://lisperator.net/uglifyjs/">lisperator.net/uglifyjs/</a>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/tools.uglifyjs -->


        <!-- /section:plugins/tools -->
</section>